<template>
    <div class="login">
        <div class="loginBox" :class="dynamicClass">
            <div class="topOperate">
                <loginTopMenu :isLogin="true"/>
            </div>
            <div class="logo">
                <img src="../../../static/icons/logo.png" alt="" />
            </div>
            <div class="loginAccount">
                <loginAccount ref="loginAccount"></loginAccount>
            </div>
            <div class="btnArea">
                <el-button @click="login" type="primary">登 录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    props: {},
    components: {
        loginAccount: () => import('./modules/loginAccount.vue'),
        loginTopMenu: () => import('@/layouts/topMenu/index.vue'),
    },
    data() {
        return {
            dynamicClass: ''
        }
    },
    computed: {},
    watch: {},
    methods: {
        login() {
            if (this.$refs.loginAccount.validate()) {
                this.dynamicClass = 'hide'
                setTimeout(() => {
                    this.$router.push({ path: '/home' })
                }, 500);
            }
        },
        initEleFunc() {
            let params = {
                width: 350,
                height: 450,
                resizable: false,
                maxable: false,
                isLogin: true
            }
            let getCurrentWindow = window.myRemote.getCurrentWindow()
            console.log(getCurrentWindow);
            window.myIpcRenderer.send("set_win_size",getCurrentWindow.id,params)
            window.myIpcRenderer.on('logData', (event, logs) => {
                console.log(logs);
            });
        },
    },
    beforeCreate() {
    },
    created() {
    },
    beforeMount() {
    },
    mounted() {
        this.initEleFunc()
    },
    beforeUpdate() {
    },
    updated() {
    },
    activated() {
    },
    deactivated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    }
}
</script> 
<style scoped lang='less'>
.login {
    width: 100%;
    height: 100%;
    background-color: #e0e3ea;
    .loginBox {
        background-color: #fff;
        width: 100%;
        height: 100%;
        .topOperate {
            -webkit-app-region: drag;
            display: flex;
            justify-content: flex-end;
            width: 100%;
            height: 30px;
        }
        .logo {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 70px;

            img {
                width: 70px;
                height: 70px;
            }
        }
        .loginAccount {
            margin-top: 20px;
            width: 100%;
            padding: 0 20px;
        }
        .btnArea {
            padding: 0 20px;
            width: 100%;
            .el-button {
                width: 100%;
            }
        }
    }
    .hide {
        animation: slit-out-vertical 0.55s ease-in both;
    }
}
@keyframes slit-out-vertical {
    0% {
        -webkit-transform: translateZ(0) rotateY(0);
        transform: translateZ(0) rotateY(0);
        opacity: 1;
    }

    54% {
        -webkit-transform: translateZ(-160px) rotateY(87deg);
        transform: translateZ(-160px) rotateY(87deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateZ(-800px) rotateY(90deg);
        transform: translateZ(-800px) rotateY(90deg);
        opacity: 0;
    }
}</style>
